<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class="wallet_box">
		<view class="card" ref="myElement">
			<image class="wellet" src="/static/images/merchant/wellet.svg" mode=""></image>
			<view class="head flex content-center">
				<image :src="merchartShop.image" mode="aspectFill"></image>
				<view class="">
					{{merchartShop.name}}
				</view>
			</view>
			<view class="money">
				￥{{merchartShop.balance}}
			</view>
			<view class="text">
				可提现余额 <text style="margin: 0 6rpx;">{{merchartShop.balance}}</text>(元)
			</view>
			<view class="tix" 
				@click="gopage('/pages/components/pages/merchant/cash')">
				去提现
			</view>
		</view>
		<view class="detail">
			<view class="title flex content-center justify-between">
				<view class="">
					收支明细
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: calc(100% - 146rpx);" @scrolltolower='scrolltolower'>
				<view class="content" v-if="list.length!==0">
					<view class="item flex content-center justify-between" v-for="(item,i) in list" :key="i">
						<view class="item_left flex content-center">
							<view class="">
								<view class="top" v-if="item.type==1">收入</view>
								<view class="top" v-if="item.type==2">支出</view>
								<view class="bom">{{formatDateTime(item.createTime)}} {{item.nicnname}}</view>
							</view>
						</view>
						<view class="right" v-if="item.type==1"> +{{item.amount}}</view>
						<view class="right" v-if="item.type==2"> -{{item.amount}}</view>
					</view>
				</view>
				<view class="" v-else>
					<uv-empty mode="list"></uv-empty>
				</view>
			</scroll-view>

		</view>
	
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
	getRevenue
} from '@/api/merchant'
import { onLoad} from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { formatDateTime } from '@/utils/util'
const main = useMainStore()
const { merchartShop } = storeToRefs(main)
const title = ref('我的钱包')
const list = ref([])
const page = ref(1)
const pageSize = ref(10)

onLoad(() => {
    revenue()
})

const  revenue = async() =>{
	let res = await getRevenue({
		shopId: merchartShop.value.id,
		pageNo: page.value
	})
	list.value = [...list.value,...res]
}

const gopage = (url) =>{
	uni.navigateTo({
		url
	})

}

const  scrolltolower = async() =>{
	page.value++
	revenue()
}
</script>

<style lang="scss">
	.wallet_box {
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;

		.card {
			padding: 24rpx 0;
			box-sizing: border-box;
			width: 700rpx;
			margin: 0 auto;
			border-radius: 0rpx 0rpx 30rpx 30rpx;
			height: 380rpx;

			.tix {
				width: 130rpx;
				height: 50rpx;
				border-radius: 20rpx ;
				position: absolute;
				top: 300rpx;
				right: 35rpx;
				background-color: #fff;
				font-size: 24rpx;
				color: #00ABFF;
				text-align: center;
				line-height: 50rpx;
			}

			.head {
				position: absolute;
				top: 60rpx;
				left: 80rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
					border-radius: 50%;
				}

				color: #fff;
				font-size: 34rpx;
				line-height: 60rpx;

			}

			.text {
				font-size: 28rpx;
				color: #fff;
				position: absolute;
				top: 290rpx;
				left: 80rpx;
			}

			.money {
				font-size: 50rpx;
				color: #fff;
				position: absolute;
				top: 180rpx;
				left: 80rpx;
			}

			.wellet {
				width: 700rpx;
				height: 350rpx;
			}

			.shouyi {
				padding: 20rpx 60rpx 0;
				box-sizing: border-box;
			}

		}

		.detail {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			flex-grow: 1;
			overflow: hidden;

			.title {
				font-size: 36rpx;
				color: #333333;
				font-weight: 600;
				padding: 40rpx;
				box-sizing: border-box;
			}

			.btn {
				width: 169rpx;
				background: #F1F2F2;
				border-radius: 34rpx;
				font-size: 24rpx;
				color: #777777;
				text-align: center;
				line-height: 67rpx;
			}

			.content {
				padding: 0 40rpx 40rpx;
				box-sizing: border-box;

				.item {
					padding: 24rpx 0;
					border-bottom: 1rpx solid #EBEBEB;

					.right {
						font-size: 30rpx;
						color: #18B2FD;
					}

					.item_left {

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}

						.top {
							font-size: 32rpx;
							color: #333333;
						}

						.bom {
							font-size: 24rpx;
							color: #777777;
						}


					}
				}
			}
		}


	}
</style>